<!--
 * @Author: qianl
 * @Date: 2024-01-26 16:05:55
 * @LastEditors: qianl
 * @LastEditTime: 2024-01-29 17:04:44
 * @FilePath: \internal-website-jxg\src\views\Home\module\information.vue
 * 
-->
<template>
<div class="container">
  <homeCard @goMore="goMore">
    <span slot="title">
      <!-- <i class="iconfont icon-a-6 home-card-title-i"></i> -->
      <img class="imgClass" src=""/>
      <span class="home-card-title">资讯动态</span>
    </span>
    <homeCardTabs :list="list" class="homeCardTabs" @handlerClick="handlerClick" ></homeCardTabs>
    <div class="infoBox" v-loading="loading">
      <infoItem :selectTitle="selectTitle" class="infoItem" :params="item" v-for="(item,index) in tableData" :key="index"></infoItem>
    </div>

  </homeCard>
</div>
</template>

<script>
import homeCard from "@/views/Home/module/homeCard";
import infoItem from "@/views/Home/module/infoItem";
import homeCardTabs from "@/views/Home/module/homeCardTabs";
export default {
  name: "information",
  components:{
    homeCard,infoItem,homeCardTabs
  },
  mounted() {
   this.getColumnInfoList()
  },
  data(){
    return {
      selected:0,
      loading:false,
      selectTitle:'',
      tableData:[],
      list:[
      ]
    }
  },
  methods:{
    getColumnInfoList(){
      let params = {"page":0,"pageSize":99,"parentId":"9"}
      this.$api.getColumnInfoList(params).then(res=>{
        this.list = res.data.data.map(x=>{
          return {
            title:x.colName,
            value:x.id
          }
        })
        this.selected = this.list[0].value
        this.selectTitle = this.list[0].title
        this.messageQuery()
      })
    },
    goMore(){
      this.$router.push({name:'newsList',query:{columnId:9}})
    },
    handlerClick(item){
      this.selected = item.value
      this.selectTitle = item.title
      this.messageQuery()
    },
    messageQuery(){
      let params = {
        category:this.selected,
        "page": 0,
        "pageSize": 4
      }
      this.loading = true
      this.$api.paginHome(params).then(res=>{
        this.loading = false
        this.tableData = res.data.data
      })
    },
  },
}
</script>

<style scoped lang="less">
.container{
  width: 91.9rem;
  height: 43.3rem;
  // height: 33.3rem;
  .infoBox{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: -2rem;
    padding-top: 1rem;
    .infoItem{
      margin-top: 3.5rem;
      // margin-top: 1.5rem;
    }
  }
  .homeCardTabs{
    margin-top: -1rem;
    margin-bottom: 1rem;
  }
}
.imgClass{
  height: 2rem;
  margin-right: 1rem;
}
</style>